<template>
    <div class="search-container">
        <!-- 搜索框 -->
        <div class="search-area">
            <van-icon name="arrow-left" class="back-icon" @click="goBack" />
            <van-search v-model="data.content" placeholder="请输入搜索关键词" shape="round" background="transparent"
                class="custom-search" @search="onSearch">
            </van-search>
        </div>

        <!-- 搜索历史 -->
        <div v-if="!data.hasSearched" class="search-history">
            <div class="history-header">
                <span>搜索历史</span>
                <van-icon name="delete-o" @click="clearHistory" />
            </div>
            <div class="history-list">
                <div v-for="(item, index) in data.searchHistory" :key="index" class="history-item"
                    @click="searchFromHistory(item)">
                    {{ item }}
                </div>
            </div>
        </div>

        <!-- 搜索结果 -->
        <div v-else class="merchant-list">
            <div v-for="(merchant, index) in data.list" :key="merchant.id ?? index">
                <MerchantCard :merchant="merchant" />
            </div>
        </div>
    </div>
</template>

<script setup lang='ts'>
import { reactive, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import type { Merchant } from '@/models/home/index'
import { getMerchantList } from '@/api/home/main'

const route = useRoute()
const router = useRouter()

const pageQuery = reactive({
    page: 1,
    pageSize: 10,
    storeName: ''
})

const data = reactive({
    content: '',
    list: [] as Merchant[],
    hasSearched: false, // 是否已搜索
    searchHistory: [] as string[] // 搜索历史
})

// 页面加载时初始化搜索历史
onMounted(() => {
    const history = localStorage.getItem('searchHistory')
    if (history) {
        data.searchHistory = JSON.parse(history)
    }
})

// 返回上一页
const goBack = () => {
    router.back()
}

// 执行搜索
const onSearch = async () => {
    if (!data.content.trim()) return

    // 添加到搜索历史
    addToHistory(data.content)

    // 设置搜索状态
    data.hasSearched = true

    pageQuery.storeName = data.content

    // 模拟搜索结果
    data.list = (await getMerchantList(pageQuery)).data.list // 替换为实际搜索结果
}

// 从历史记录搜索
const searchFromHistory = (keyword: string) => {
    data.content = keyword
    onSearch()
}

// 添加搜索历史
const addToHistory = (keyword: string) => {
    // 避免重复
    const index = data.searchHistory.indexOf(keyword)
    if (index !== -1) {
        data.searchHistory.splice(index, 1)
    }

    // 添加到最前面
    data.searchHistory.unshift(keyword)

    // 限制历史记录数量
    if (data.searchHistory.length > 10) {
        data.searchHistory.pop()
    }

    // 保存到本地存储
    localStorage.setItem('searchHistory', JSON.stringify(data.searchHistory))
}

// 清空搜索历史
const clearHistory = () => {
    data.searchHistory = []
    localStorage.removeItem('searchHistory')
}
</script>

<style lang='scss' scoped>
.search-container {
    padding: 15px;
}

.search-area {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.back-icon {
    font-size: 20px;
    color: #333;
}

.custom-search{
    width: 100%;
}

.custom-search :deep(.van-search__content) {
    background: #ffffff;
    border: 1px solid #f02c00;
    border-radius: 20px;

}

.custom-search :deep(.van-field__control) {
    caret-color: #f02c00;
}

.custom-search :deep(.van-field__left-icon) {
    margin-right: 10px;
}

.search-history {
    padding: 20px;

    .history-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px;
        font-size: 16px;
        font-weight: bold;

        .van-icon {
            color: #999;
            font-size: 18px;
        }
    }

    .history-list {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }

    .history-item {
        padding: 8px 15px;
        background-color: #f5f5f5;
        border-radius: 20px;
        font-size: 14px;
    }
}
</style>